<template>
  <el-row class="user_rigister">
    <el-col :span="18" :offset="3" class="body">
      <el-form
        ref="registerForm"
        :model="form"
        :rules="rules"
        :inline-message="true"
        label-width="0px"
      >
        <el-form-item prop="email" label-width="0px" class="otherBlock">
          <div v-show="form.email || emailFocus" class="title_show">邮箱</div>
          <el-col :span="16">
            <el-input
              v-model="form.email"
              placeholder="邮箱"
              @focus="emailFocus = true"
              @blur="emailFocus = false"
            ></el-input>
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary"
              round
              size="small"
              plain
              :disabled="emailCodeStatus"
              @click.stop.prevent="sendEmailCode"
              >{{ emailCodeText }}</el-button
            >
          </el-col>
        </el-form-item>
        <el-form-item prop="emailCode" label-width="0px">
          <div v-show="form.emailCode || emailCodeFocus" class="title_show">
            邮箱校验码
          </div>
          <el-input
            v-model="form.emailCode"
            placeholder="邮箱校验码"
            @focus="emailCodeFocus = true"
            @blur="emailCodeFocus = false"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd" label-width="0px">
          <div v-show="form.pwd || pwdFocus" class="title_show">密码</div>
          <el-input
            v-model="form.pwd"
            placeholder="密码"
            show-password
            @focus="pwdFocus = true"
            @blur="pwdFocus = false"
          ></el-input>
        </el-form-item>
        <el-form-item prop="rePwd" label-width="0px">
          <div v-show="form.rePwd || rePwdFocus" class="title_show">
            重复密码
          </div>
          <el-input
            v-model="form.rePwd"
            placeholder="重复密码"
            show-password
            @focus="rePwdFocus = true"
            @blur="rePwdFocus = false"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="verificationCode"
          label-width="0px"
          class="otherBlock"
        >
          <div
            v-show="form.verificationCode || verificationCodeFocus"
            class="title_show"
          >
            验证码
          </div>
          <el-col :span="15">
            <el-input
              v-model="form.verificationCode"
              placeholder="验证码"
              @focus="verificationCodeFocus = true"
              @blur="verificationCodeFocus = false"
            ></el-input>
          </el-col>
          <el-col :span="9" class="v_code_image">
            <VerificationCode :width="90" :height="30" />
          </el-col>
        </el-form-item>
        <el-row class="form_block">
          <el-col :span="12" :offset="6" class="changeDialog">
            <el-button type="text" style="padding:0" @click="changeDialogPage"
              >已有账号</el-button
            >
          </el-col>
        </el-row>
        <el-row class="form_block">
          <el-button
            class="register"
            type="primary"
            round
            @click="register('registerForm')"
            >立即注册</el-button
          >
        </el-row>
        <el-row class="agreement form_block">
          <el-checkbox v-model="isRead" style="font-size:12px"
            >我已阅读并同意</el-checkbox
          >
          <a href="/" @click.stop.prevent="isReg = true">《注册协议》</a>和
          <a href="/" @click.stop.prevent="isReg = true">《隐私政策》</a>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import VerificationCode from '../VerificationCode'
import secret from '@/assets/js/utils/secret'
import { checkEmail, checkPwd } from '@/assets/js/check'
export default {
  components: { VerificationCode },
  props: {
    changeDialogPage: { type: Function, default: () => {} }
  },
  data() {
    const checkRePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.pwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      isRead: false,
      emailCodeStatus: false,
      emailFocus: false,
      emailCodeFocus: false,
      emailCodeText: '发送校验码',
      pwdFocus: false,
      rePwdFocus: false,
      verificationCodeFocus: false,
      form: {
        email: '',
        emailCode: '',
        pwd: '',
        rePwd: '',
        verificationCode: ''
      },
      rules: {
        email: [{ validator: checkEmail, trigger: 'blur' }],
        emailCode: [
          { required: true, message: '请输入邮箱校验码', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPwd, trigger: 'blur' }
        ],
        rePwd: [{ validator: checkRePwd, trigger: 'blur' }],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeEmailCodeButton() {
      this.emailCodeStatus = true
      let second = 60
      const time = setInterval(() => {
        this.emailCodeText = `再次发送(${--second})`
        if (second === 0) {
          clearInterval(time)
          this.emailCodeStatus = false
          this.emailCodeText = '发送校验码'
        }
      }, 1000)
    },
    async sendEmailCode() {
      const value = this.form.email.trim()
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        this.$message({
          message: '邮箱不能为空',
          type: 'warning'
        })
        return
      }
      if (!mailReg.test(value)) {
        this.$message({
          message: '请输入正确的邮箱格式',
          type: 'warning'
        })
        return
      }
      const { status, data } = await this.$axios.get('/public/ECode', {
        params: { email: this.form.email }
      })
      if (status === 200) {
        if (data.code === 0) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.changeEmailCodeButton()
        } else if (data.code === -1) {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }
    },
    register(formName) {
      const self = this
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (!self.isRead) {
            this.$message({
              message: '请先阅读并同意《注册协议》和《隐私政策》',
              type: 'warning'
            })
            return false
          }
          const { status, data } = await self.$axios.post('/user', {
            email: self.form.email,
            ecode: self.form.emailCode,
            pwd: secret.Encrypt(self.form.pwd),
            rePwd: secret.Encrypt(self.form.rePwd),
            vcode: self.form.verificationCode
          })
          if (status === 200) {
            if (data.code === 0) {
              self.$message({
                message: '注册成功！',
                type: 'success'
              })
            } else {
              self.$message({
                message: data.msg,
                type: 'error'
              })
            }
          }
        } else {
          self.$message({
            message: '请先按照格式填写信息。',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body .el-form-item {
  position: relative;
  margin-bottom: 24px;
}
.body .form_block {
  margin-bottom: 24px;
}
.v_code_name {
  line-height: 40px;
}
.v_code_image {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.changeDialog {
  display: flex;
  justify-content: center;
  align-items: center;
  a {
    color: $--color-primary;
    text-decoration: none;
  }
  i {
    vertical-align: middle;
  }
}
.register {
  width: 100%;
}
.title_show {
  position: absolute;
  top: -20px;
  left: 14px;
  font-size: 12px;
  color: $--color-primary;
  z-index: 1;
}
.agreement {
  font-size: 12px;
  /deep/ .el-checkbox__label {
    font-size: 12px;
  }
  a {
    color: $--color-primary;
    text-decoration: none;
  }
}
/deep/ .el-form-item__error--inline {
  position: absolute;
  top: -10px;
  right: 16px;
}
/deep/ .otherBlock .el-form-item__error--inline {
  position: absolute;
  top: -10px;
  right: 120px;
}
/deep/ .el-input__inner {
  border: none;
  border-bottom: 1px solid #c0c4cc;
  &:focus {
    border-color: $--color-primary;
  }
}
</style>
